<template>
  <div>
    <el-upload
      :limit="limit"
      :action="uploadStreamUrl"
      name="uploadFile"
      :show-file-list="!isButton"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :on-exceed="handleExceed"
      :on-remove="uploadRemove"
      :on-error="handleError"
      :file-list="videoList"
      accept="video/*">
      <el-button v-if="isButton" size="small" type="primary" :loading="isLoading">{{isLoading ? '上传中' : '点击上传'}}
      </el-button>
      <i v-else class="el-icon-plus" :class="{avatar_icon: isAvatar}"></i>
      <em class="avatar_em" v-if="tip">{{tip}}</em>
    </el-upload>

  </div>
</template>

<script>
  import {uploadUrl} from '@/services/model/common'
  import constUrl from '@/services/env'

  export default {
    props: {
      // 张数限制
      limit: {
        type: Number,
        default:
          2
      }
      ,
      // 张数限制
      disabled: {
        type: Boolean,
        default:
          false
      }
      ,
      // 上传头像请用 :value="" 直接传值， form表单请用 v-model绑定  在imgList set方法中会触发不通方法
      value: {
        type: null,
      }
      ,
      // 单位M
      sizeLimit: {
        type: Number,
        default:
          1
      }
      ,
      // 上传头像标志位 该标志位仅对  张数、入参、回参有区别
      avatar: {
        type: null,
        default:
          null
      }
      ,
      // =button  通过按钮触发  否则通过+触发
      trigger: {
        type: null,
        default:
          null
      }
      ,
      // 上传提示信息
      tip: {
        type: String
      }
    }
    ,
    data() {
      return {
        // 文件上传流url
        uploadStreamUrl: uploadUrl,
        // el-upload的组件列表 刚进入时由于 v-model绑定传值的 value由于异步原因不一定有值，所以在刚加载页面时不能对videoListModel赋值
        // 第一次回显读取图片取 vallue中的值
        videoListModel: null,
        // 查看图片序列值
        previewIndex: 0,
        // 接口正在加载
        isLoading: false,
      }
    }
    ,
    computed: {
      // 是否为上传头像
      isAvatar() {
        return this.avatar !== null
      }
      ,
      // 是否通过按钮触发
      isButton() {
        return this.trigger === 'button'
      }
      ,
      // 图片 model
      videoList: {
        get() {
          //  ******！！！  第一次进入时this.videoListModel为null所以取this.value的值  但上传之后，videoListModel一定有值。为了修复上传闪动的bug,第一次进入时取
          return this.videoListModel || this.initList.map(x => ({url: constUrl + x}))
        }
        ,
        set(list) {
          // 如果是按钮模式，则始终为空数组
          this.videoListModel = this.isButton ? [] : list
          // 将ul-upload 返回带response的对象格式  以及回显的  对象格式全部转化为 后端需要的字符串路径
          list = list.map(x => x.response ? x.response.data.path : x.url.replace(constUrl, ''))
          // 头像只更新 url  ， 图片列表更新列表
          let params = this.isAvatar ? list[0] : list
          this.$emit('input', params)
          this.$emit('update', params)
        }
      }
      ,
      initList() {
        let initList
        // 上传头像模式 value 传入的是字符窜，而不是数组。
        if (this.isAvatar) initList = this.value ? [this.value] : []
        // 图片列表
        else initList = this.value || []
        return initList
      }
      ,
    }
    ,
    methods: {
      handleSuccess(res, file, fileList) {
        this.isLoading = false
        if (res.code === 200) {
          this.videoList = fileList
          this.$message.success('视频已上传')
        } else this.$message.error(res.message)
      }
      ,
      handleError(err) {
        this.isLoading = false
        this.$message.error('上传失败:' + err)
      }
      ,
      beforeUpload(file) {
        const isVideo = file.type === 'video/mp4' || file.type === 'video/ogg';
        const isLt500MB = file.size / 1024 / 1024 < 500;

        if (!isVideo) {
          this.$message.error('请上传视频格式文件!');
        }
        if (!isLt500MB) {
          this.$message.error('上传视频大小不能超过 500MB!');
        }
        this.isLoading = true
        return isVideo && isLt500MB;
      }
      ,
      // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
      uploadRemove(file, fileList) {
        this.videoList = fileList
      }
      ,
      // 添加文件个数限制
      handleExceed(files, fileList) {
        // 每次只能提交一个文件
        if (this.videoList?.length >= this.limit) {
          this.$message.warning(`最多添加${this.limit}个视频`)
          return false
        }
      },
    }
  }
</script>
<style lang="less" scoped>
  .upload_img /deep/ .el-upload.el-upload--picture-card {
    display: inline-flex;
    flex-direction: column;
    line-height: 1 !important;
    align-items: center;
    justify-content: center;
  }

  /** 主题切换相关 */
  .theme-light {
    @upload-img-avatar-text: #515563;

    .init-theme();
  }

  .theme-dark {
    @upload-img-avatar-text: #D2D7ED;

    .init-theme();
  }

  .init-theme () {
    .upload_avatar {
      position: relative;
      width: 80px;
      height: 80px;

      /deep/ .el-upload.el-upload--picture-card {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
      }

      /deep/ .el-upload-list.el-upload-list--picture-card {
        position: relative;
        z-index: 2;

        .el-upload-list__item {
          width: 100%;
          height: 100%;
          margin: 0;

          .el-upload-list__item-status-label {
            position: absolute;
            display: none;
          }
        }
      }

      /deep/ .el-upload-list__item.el-list-leave-active {
        transition: none !important;
      }

      .avatar_em {
        color: @upload-img-avatar-text;
        font-size: 14px;
        line-height: 20px;
      }

      .avatar_icon {
        font-size: 20px;
        margin-bottom: 6px;
        font-weight: bold;
      }
    }
  }

  .hideUpload {
    /deep/ .el-upload--picture-card {
      display: none !important;
    }
  }
</style>
